<template>
    <div id="add-edit-InspectionTask">
        <el-dialog
            :title="titleCon"
            v-model="isUseDialog" 
            draggable 
            :fullscreen="true"
            :close-on-click-modal="false" 
            :before-close="handleClose"
            :destroy-on-close="true"
        >
            <el-steps :active="activeStep" simple>
                <el-step class="step-s" @click="handleStepClick(1)" title="基础配置" :icon="EditPen" />
                <el-step class="step-s" @click="handleStepClick(2)" title="巡检项目" :icon="PieChart" />
                <el-step class="step-s" @click="handleStepClick(3)" title="任务分配" :icon="Discount" />
            </el-steps>
            <!-- 基础配置 -->
            <BasicsDeployTwo
                :preType="preType"
                ref="bas"
                :basInfo="basInfo"
                v-if="activeStep === 1"
            />
            <!-- 巡检项目 -->
            <PollingProjectTwo
                @pollingSub='pollingSub'
                :pollingInfo="pollingInfo"
                v-if="activeStep === 2"
            />
            <!-- 任务分配 -->
            <TaskAllotTwo 
                ref="taskRef"
                :taskInfo="taskInfo"
                @transferInfo="transferInfo"
                v-if="activeStep === 3"
            />

            <template #footer>
                <el-button @click="cancelUseClick">取消</el-button>
                <el-button v-if="activeStep === 1 || activeStep === 2" :loading="repeatDis" :disabled="repeatDis" type="primary" @click="submitForm(activeStep)">下一步</el-button>
                <el-button v-if="activeStep === 3" type="primary" :loading="repeatDis" :disabled="repeatDis" @click="submitForm(activeStep)">完成</el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref , computed , watch , toRaw } from 'vue';
import { EditPen, PieChart, Discount } from '@element-plus/icons-vue';
import { ElButton, ElDialog , ElMessage } from 'element-plus';
import BasicsDeployTwo from './basics-deploy-two.vue';
import PollingProjectTwo from './polling-project-two.vue';
import TaskAllotTwo from './task-allot-two.vue';
import { SMSIPTaskAdd , SMSIPTaskUpdate , SMSIPTaskTaskAllocation } from '/@/api/centerControl/sms';
export default defineComponent( {
    name: 'add-edit-InspectionTask',
    components: {
        BasicsDeployTwo,
        TaskAllotTwo,
        PollingProjectTwo,
    },
    props: {
        isUseDialog:{
            type: Boolean,
            default: false,
        },
        repairInfo: {
            type: String,
            default: ''
        },
        preType: {
            type: String,
            default: ''
        },
    },
    setup(props,ctx){
        const titleCon = ref();
        const ruleFormRef = ref();
        const activeStep = ref(1);
        const basInfo = ref();
        const bas = ref(null);
        const taskRef = ref(null);
        const pollingInfo = ref('');
        let planId = 0; // 巡检计划id
        let taskId: any = ''; // 巡检任务id
        let lineId = 0; // 线路id
        const setFun: any = ref({});
        const taskInfo = ref();
        let allotVal = '';
        let stateVal = 0;
        const repeatDis = ref(false);

        /*** handleClose 关闭按钮点击事件 */
        const handleClose = () => {
            ctx.emit('cancelUseClick')
        }

        /*** cancelUseClick 取消事件 */
        const cancelUseClick = () => {
            ctx.emit('cancelUseClick')
        }
        /*** 巡检项目子组件传递过来的值跟函数 */
        const pollingSub = (val:any , fun: Function | any) => {
            setFun.value.val = val;
            setFun.value.fun = fun;
        }
        const transferInfo = (newVal: any, num: number) => {
            allotVal = newVal;
            stateVal = num;
        }

        /*** submitForm 下一步点击事件 */
        const submitForm = (num: Number) => {
            repeatDis.value = true;
            if(num === 1){
                const getRef: any = bas.value;
                const isFormValid = getRef.ruleFormRef.validate();
                const { id, ...restObj } = getRef.showForm;
                submitFun(num, isFormValid, {...restObj , ...getRef.ruleForm});
            }
            if(num === 2 || num === 3) submitFun(num);
        }
        /*** submitFun 提交函数 */
        const submitFun = ( n: Number, f?: Function | any, i?: any) => {
            let res: any;
            switch(n){
                case 1:
                    let subFun = f;
                    subFun.then(async(result: any) => {
                        if(result){
                            try{
                                if(props.repairInfo === ''){
                                    res = await SMSIPTaskAdd(i);
                                    if(res.success) taskId = res.data;
                                }else{
                                    res = await SMSIPTaskUpdate(i);
                                }
                                if(res.success){
                                    let setObj: any = {};
                                    setObj.taskId = taskId;
                                    setObj.planId = planId;
                                    setObj.lineId = lineId;
                                    pollingInfo.value = JSON.stringify(setObj);
                                    activeStep.value = 2;
                                    repeatDis.value = false;
                                }else{
                                    repeatDis.value = false;
                                }
                            }catch(error){ repeatDis.value = false; }
                        }
                    }).catch((error: any) => {
                        repeatDis.value = false;
                    });
                    break;
                case 2:
                    if(setFun.value.val.length !== 0){
                        let getResulr = setFun.value.fun(setFun.value.val);
                        getResulr.then((res: any) => {
                            if(res){
                                taskInfo.value = props.repairInfo;
                                activeStep.value = 3;
                            }
                            repeatDis.value = false;
                        });
                    }else{
                        ElMessage({
                            type: 'warning',
                            message: '请先选择需要巡检的项目',
                            onClose: () => {
                                repeatDis.value = false;
                            }
                        })
                    }
                    break;
                case 3:
                    if(allotVal !== ''){
                        let item = JSON.parse(allotVal);
                        let param: any = {};
                        param.id = taskId;
                        if(stateVal === 0 || stateVal === 2){
                            let setArr: any = [];
                            item.map((i: any) => {
                                setArr.push(i.id);
                            });
                            stateVal === 0 ? param.l_UserIds = setArr : param.l_PosIds = setArr;
                        }
                        if(stateVal === 1){
                            let setArr: any = [];
                            item.map((i: any) => {
                                setArr.push(i.n_Id);
                            });
                            param.l_TeamGroupIds = setArr;
                        }
                        allotFun(param);
                    }else{
                        ElMessage({
                            type: 'warning',
                            message: '请先选择任务分配的对象',
                            onClose: () => {
                                repeatDis.value = false;
                            }
                        })
                    }
                    break;
            }
        }
        /*** 任务分配提交事件 */
        const allotFun = async(val: object) => {
            try{
                let res: any = await SMSIPTaskTaskAllocation(val);
                if(res.success){
                    ctx.emit('updateData');
                    ctx.emit('controlUseClick');
                    repeatDis.value = false;
                }else{
                    ctx.emit('controlUseClick');
                    repeatDis.value = false;
                }
            }catch(error){ repeatDis.value = false; }
        }
        /*** handleStepClick 步骤条点击事件 */
        const handleStepClick = (inx: number) => {
            if(props.repairInfo !== ''){
                activeStep.value = inx;
                switch(inx){
                    case 1:
                        break;
                    case 2:
                        let setObj: any = {};
                        setObj.taskId = taskId;
                        setObj.planId = planId;
                        pollingInfo.value = JSON.stringify(setObj);
                        break;
                    case 3:
                        taskInfo.value = props.repairInfo;
                        break;
                }
            }
        }

        /*** 监听isUseDialog的变化 */
        watch(() => props.isUseDialog,(newVal) => {
            if(newVal){
                basInfo.value = '';
                activeStep.value = 1;
                repeatDis.value = false;
                if(props.repairInfo !== ''){
                    titleCon.value = '巡检任务 - 编辑';
                    let getInfo = JSON.parse(props.repairInfo);
                    console.log(getInfo,'getInfo')
                    basInfo.value = props.repairInfo;
                    taskId = getInfo.id;
                    planId = getInfo.l_IPPlanId;
                    lineId = getInfo.l_IPPathId;
                }else{
                    titleCon.value = '巡检任务 - 新增';
                }
            }
        })

        /*** cancelBasClick 基础配置取消事件 */
        const cancelBasClick = () => {}
        /*** controlBasClick 基础数据提交事件 */
        const controlBasClick = () => {}

        /*** isUseDialog 响应弹窗的关闭  */
        const isUseDialog = computed(() => {
            return props.isUseDialog
        })

        return {
            handleClose,
            submitForm,
            cancelUseClick,
            ruleFormRef,
            titleCon,
            isUseDialog,
            EditPen: EditPen,
            PieChart: PieChart,
            Discount: Discount,
            handleStepClick,
            activeStep,
            basInfo,
            cancelBasClick,
            controlBasClick,
            bas,
            taskRef,
            pollingInfo,
            pollingSub,
            taskInfo,
            transferInfo,
            repeatDis,
        }
    },
} )
</script>
<style scoped lang="scss">
:deep(.el-dialog__body){
    height: calc(100vh - 120px);
    max-height: none!important;
    overflow-y: hidden;
}
// :deep(.el-dialog__body){
//     // height: calc(100vh - 120px);
//     min-height: 30vh;
//     max-height: 50vh;
//     // max-height: none!important;
//     overflow-y: hidden;
// }
:deep(.el-step__icon-inner){
    font-size: 24px!important;
}
.step-s{
    cursor: pointer;
}
</style>